import { defineComponent, onUnmounted } from "vue";
import { clamp } from "./utils";

export const Saturation = defineComponent({
    name: 'Saturation',
    props: {
        value: {type: Object}
    },
    emits: ['change'],
    setup (props, { emit }) {
        let container: any;
        const handleMouseDown = (e: any) => {
            if (typeof e.button === 'number' && e.button !== 0) return false;
            handleChange(e);

            document.addEventListener('mousemove', handleChange, false);
            document.addEventListener('mouseup', onDragEnd, false);
        };

        const onDragEnd = (e: any) => {
            handleChange(e);
            document.removeEventListener('mousemove', handleChange);
            document.removeEventListener('mouseup', onDragEnd);
        };

        onUnmounted(() => {
            document.removeEventListener('mousemove', handleChange);
            document.removeEventListener('mouseup', onDragEnd);
        });

        const handleChange = (e: any) => {
            e.preventDefault();
            e.stopPropagation();

            const { clientWidth, clientHeight } = container;
            const xOffset = container.getBoundingClientRect().left + window.screenX;
            const yOffset = container.getBoundingClientRect().top + window.screenY;
            const left = clamp(e.clientX - xOffset, 0, clientWidth);
            const top = clamp(e.clientY - yOffset, 0, clientHeight);
            const saturation = left / clientWidth;
            const bright = clamp(1 - top / clientHeight, 0, 1);

            emit('change', {
                h: props.value.hsv.h,
                s: saturation,
                v: bright,
                a: props.value.hsv.a,
                source: 'hsva'
            });
        };

        const bgColorStyle = () => ({ background: `hsl(${props.value.hsv.h}, 100%, 50%)` });
        const pointerStyle = () => ({ top: `${-(props.value.hsv.v * 100) + 1 + 100}%`, left: `${props.value.hsv.s * 100}%` });
        return () => <div class="cm-saturation" style={bgColorStyle()} onMousedown={handleMouseDown} ref={(el) => container = el}>
            <div class="cm-saturation-white"></div>
            <div class="cm-saturation-black"></div>
            <div class="cm-saturation-pointer" style={pointerStyle()}>
                <div class="cm-saturation-circle"></div>
            </div>
        </div>;
    }
});
